<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="../public/cdn/vue/2.6.10/vue.js"></script>
        <script type="text/javascript" src="../public/cdn/vue-router/3.0.1/vue-router.min.js"></script>
    </head>

    <body>
        <div id="app">
            <h1>path同名问题</h1>
            <p>当前路由：{{$route.path}}</p>
            <p><button @click="$router.push('/path1')">/path1</button></p>
            <p><button @click="$router.push('/path2/#?a=b')">/path1/#?a=b</button></p>
            <!-- 路由出口，匹配到的组件将渲染到这里 -->
            <router-view></router-view>
        </div>
    </body>

    <script>
        // 定义路由：将组件 (components) 映射到路由 (routes)；匹配的优先级就按照路由的定义顺序：路由定义得越早，优先级就越高
        var router = new VueRouter({
            mode: 'hash', // 默认hash，即url后面会出现#；使用history模式，使用浏览器的history.pushState方法来实现路由，当使用history模式时，URL不会出现#，并且刷新页面不会重新加载页面
            routes: [
                {
                    path: '/path1',
                    component: {
                        template: '<div>path1 $route.params={{ $route.params }}</div>'
                    }
                },
                {
                    path: '/path2',
                    component: {
                        template: '<div>/path2 $route.params={{ $route.params }}</div>'
                    }
                },
            ]
        });
        const app = new Vue({
            el: '#app',
            router: router,
            methods: {
            },
            watch: {
                $route(to, from) {
                    // 对路由变化做出响应
                    console.log('路由变化了:' + from.path + '==>' + to.path)
                }
            }
        });
    </script>

</html>
